﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Tooltips.aspx.cs" Inherits="DummyWebProject.Tooltips" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="Form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/jquery-1.3.2.min.js" />
            <asp:ScriptReference Path="~/jquery-ui-1.7.1.custom.min.js" />
            <asp:ScriptReference Assembly="JQuery" Name="JQuery.JQuery.ACT.js" />
        </Scripts>
    </asp:ScriptManager>
    <span style="position: absolute; top: 0px; left: 0px">TopLeft</span>
    <span style="position:absolute; top:0px; left:50%">TopCenter</span>
    <span style="position: absolute; top: 0px; right: 0px">TopRight</span>
    <span style="position:absolute; top:50%; left:0px">MiddleLeft</span>
    <span style="position:absolute; top:50%; left:50%">MiddleCenter</span>
    <span style="position:absolute; top:50%; right:0px">MiddleRight</span>
    <span style="position: absolute; bottom: 0px; left: 0px">BottomLeft</span>
    <span style="position:absolute; bottom:0px; left:50%">BottomCenter</span>
    <span style="position: absolute; bottom: 0px; right: 0px">BottomRight</span>
    <div id="tooltip" style="background:red;width:100px;height:40px;">
        Tooltip content with 
        <a href="http://www.google.fr">link</a> 
        <a href="http://www.google.fr">link</a>
        <a href="http://www.google.fr">link</a>
        <a href="http://www.google.fr">link</a>
    </div>

    <script type="text/javascript">
        $("span").tooltip({ tooltipSelector: '#tooltip', parentRelativeSelector: 'body' });
        $('#tooltip').live('positioned', function(source, alignement) { $('body').append(source); });
    </script>

    </form>
</body>
</html>
